<template>
  <div>
    <h1>System Settings</h1>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>Application Settings</span>
        </div>
      </template>
      <div class="card-content">
        <el-form :model="settings" label-width="200px">
          <el-form-item label="Application Name">
            <el-input v-model="settings.appName" />
          </el-form-item>
          <el-form-item label="Dark Mode">
            <el-switch v-model="settings.darkMode" />
          </el-form-item>
          <el-form-item label="Session Timeout (minutes)">
            <el-input-number v-model="settings.sessionTimeout" :min="5" :max="120" />
          </el-form-item>
          <el-form-item label="Log Retention (days)">
            <el-input-number v-model="settings.logRetention" :min="1" :max="365" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSettings">Save Settings</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const settings = ref({
  appName: 'Admin Application',
  darkMode: false,
  sessionTimeout: 30,
  logRetention: 30
})

const saveSettings = () => {
  console.log('Saving settings:', settings.value)
  // In a real app, this would call an API to save the settings
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
.card-header {
  font-weight: bold;
  font-size: 18px;
}
</style>
